<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
  <script src="./layui/layui.all.js"></script>
  <!-- <script src="./layui/vue.js"></script> -->
  <!-- <script src="./layui/soulTable.slim.js"></script> -->
</head>

<body>
  <table lay-filter='editTable' id="editTable"></table>

  <script>
    // // 自定义模块，这里只需要开放soulTable即可
    // layui.extend({
    //   soulTable: './layui/soulTable.slim'
    // });

    // 自定义模块，这里只需要开放soulTable即可
    layui.extend({
      soulTable: 'libs/soulTable.slim'
    });

    var $ = layui.jquery;
    table = layui.table
    layui.use(['soulTable'], function () {

      soulTable = layui.soulTable
      table.render({
        elem: '#editTable',
        height: 300,
        data: [
          { name: 'aaa1', age: 11 },
          { name: 'bbb2', age: 22 },
          { name: 'aaa3', age: 33 },
          { name: 'bbb4', age: 44 },
          { name: 'aaa5', age: 55 },
          { name: 'bbb6', age: 66 },
          { name: 'aaa7', age: 77 },
          { name: 'bbb8', age: 88 },
        ],
        size: 'sm',
        cols: [[
          { type: 'numbers', title: '111', fixed: 'left', width: 70 },
          { type: 'checkbox', title: 'checkbox', fixed: 'left', width: 70 },
          { field: 'name', title: '名字', width: 200, },
          { field: 'age', title: '年龄', width: 200, edit: 'text' }
        ]]
        , rowDrag: {
          trigger: 'row', done: function (obj) {
            // 完成时（松开时）触发
            // 如果拖动前和拖动后无变化，则不会触发此方法
            console.log(obj.row) // 当前行数据
            console.log(obj.cache) // 改动后全表数据
            console.log(obj.oldIndex) // 原来的数据索引
            console.log(obj.newIndex) // 改动后数据索引
          }
        },

        done: function () {
          // 在 done 中开启
          layui.soulTable.render(this)
        }
      })




      $(window).focus(function (e) {
        setTimeout(() => {
          location.reload();
        }, 1000);

      });

    })



  </script>
</body>

</html>